import { Component } from 'react'
import Header from './components/Header'
import Tab from './components/Tab'
import './App.css'
class App extends Component {
  constructor(props) {
    super()
    this.state = {
      todos: JSON.parse(localStorage.getItem('todos')) || [], // 保留原任务数组
      filterTodos: [] // 用来渲染数据的任务数组
    }
  }

  componentWillMount() {
    this.filterFn("all")
  }

  filterFn = (status) => {
    if(status === "all") {
      this.setState({
        filterTodos: this.state.todos
      })
    } else {
      this.setState({
        filterTodos: this.state.todos.filter(item => {
          return item.status === status
        })
      })
    }
    
    // console.log(this.state.filterTodos)
  }
  // 获取header添加的todo
  getTodo = (data) => {
    this.state.todos.push(data)
    this.setState({
      todos: this.state.todos
    })
    localStorage.setItem('todos', JSON.stringify(this.state.todos))
  }
  render() {
    let tab = [
      {
        name: "全部",
        status: "all"
      },
      {
        name: "正在进行",
        status: "pending"
      },
      {
        name: "已经完成",
        status: "isFinished"
      },
      {
        name: "删除",
        status: "delete"
      }
    ]
    return (
      <div className="App">
        <Header fn={this.getTodo}/>
        <div className="content">
            <ul>
              {
                this.state.filterTodos.map((item, i) => {
                  return <li key={i}>
                    <input type="checkbox" />
                    {item.name}
                    <button onClick={
                      () => {
                        item.status = "delete"
                        this.filterFn('all')
                      }
                    }>删除</button>
                  </li>
                })
              }
            </ul>
        </div>
        <Tab list={tab} fn={this.filterFn}></Tab>
      </div>
    );
  }
}
export default App;
